<!doctype html>
<html lang="en">

	<head>

		<!-- Basic Page Needs
    ================================================== -->
		<title>TubeLite Streaming Video HTML Template</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="TubeLite is - Professional A unique and beautiful collection of UI elements">
		<link rel="icon" href="assets/images/favicon.png">

		<!-- CSS 
    ================================================== -->
		<link rel="stylesheet" href="assets/css/style.css">
		<link rel="stylesheet" href="assets/css/night-mode.css">
		<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/uikit/3.2.1/css/uikit.min.css">

		<!-- icons
    ================================================== -->
		<link rel="stylesheet" href="assets/css/icons.css">

		<!-- Google font
    ================================================== -->
		<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">

		<link rel="stylesheet" href="./assets/css/video.css">
		<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="./assets/js/video.js"></script>

	</head>


	<body>

		<!-- Wrapper -->
		<div id="wrapper" class="sidebar-out">

			<!-- sidebar -->
			<div class="main_sidebar">
				<div class="side-overlay" uk-toggle="target: #wrapper ; cls: collapse-sidebar mobile-visible"></div>

				<!-- sidebar header -->
				<div class="sidebar-header">
					<h4> 导航</h4>
					<span class="btn-close" uk-toggle="target: #wrapper ; cls: collapse-sidebar mobile-visible"></span>
				</div>

				<!-- sidebar Menu -->
				<div class="sidebar">
					<div class="sidebar_innr" data-simplebar>

						<div class="sections">
							<h3> Browse </h3>
							<ul>
								<li> <a href="home.html"> <i class="uil-home-alt"></i> <span> 主页 </span> </a></li>
								<li> <a href="your-watch-later.html">
										<i class="uil-users-alt"></i> <span> 电影列表 </span> </a></li>

							</ul>
						</div>










					</div>


				</div>

			</div>

			<!-- header -->
			<div id="main_header" class="uk-light bg-dark">
				<header>

					<!-- Logo-->
					<i class="header-traiger uil-bars" uk-toggle="target: #wrapper ; cls: collapse-sidebar mobile-visible"></i>

					<!-- Logo-->
					<div id="logo">
						<a href="#"> <img src="assets/images/logo.png" alt=""></a>
						<a href="#"> <img src="assets/images/logo-light.png" class="logo-inverse" alt=""></a>
					</div>



					<!-- user icons -->
					<div class="head_user">
						<span>

						</span>
						<!-- profile -image -->
						<a class="opts_account"> <img src="assets/images/avatars/avatar-1.jpg" alt=""></a>

						<!-- profile dropdown-->
						<div uk-dropdown="pos: top-right;mode:click ; animation: uk-animation-slide-bottom-small" class="dropdown-notifications small">



							<ul class="dropdown-user-menu">

								<li>
									<a href="#" id="night-mode" class="btn-night-mode">
										<i class="icon-feather-moon"></i> 模式切换
										<span class="btn-night-mode-switch">
											<span class="uk-switch-button"></span>
										</span>
									</a>
								</li>
								<li><a href="page-setting.html"> <i class="uil-cog"></i>个人信息</a></li>
								<li><a href="form-modern-login.html"> <i class="icon-feather-log-out"></i> 登出</a>
								</li>
							</ul>


						</div>

					</div>

				</header>

			</div>

			<!-- contents -->
			<div class="main_content content-expand">
				<div class="main_content_inner">


					<div uk-grid>
						<div class="uk-width-2-3@m">

							<div class="video_box">
								<div class="video_title">
									<!-- 	<h2>钢铁侠</h2> -->
								</div>
								<div class="video">
									<a href="javascript:;" class="play">&#xe61d;</a>
									<video src="https://blz-videos.nosdn.127.net/1/OverWatch/OVR-S03_E03_McCree_REUNION_zhCN_1080P_mb78.mp4"
									 poster="" id="modieId"></video>
									<div class="controls">
										<a href="javascript:;" class="switch">&#xe623;</a>
										<a href="javascript:;" class="enlarge">&#xe63d;</a>
										<div class="time">
											<div class="progress">
												<div class="playprogress">
													<div class="slider"></div>
												</div>
											</div>
											<div class="timedisplay">
												<span class="currentTime">00:00</span> / <span class="duration">00:00</span>
											</div>
										</div>
										<div class="speed">
											<div class="speed_btn">
												<ul>
													<li>0.5x</li>
													<li>0.75x</li>
													<li>1.0x</li>
													<li>1.25x</li>
													<li>1.5x</li>
													<li>2.0x</li>
												</ul>
											</div>
											<span>倍速</span>
										</div>
										<div class="volume">
											<a href="javascript:;" class="volume_btn">&#xe63e;</a>
											<input type="range" class="volume_range" min="0" max="100" value="100">
										</div>
									</div>
								</div>

							</div>

							<div class="video-info mt-3">

								<!-- video title -->
								<div class="video-info-title">
									<h1> </h1>
								</div>




								<hr class="mt-0 mb-2">


								<h3> 简介：</h3>
								<p class="pinlun"></p>

							</div>

							<hr>

							<div class="comments mt-4">
								<h3> 评论 <span class="comments-amount"></span> </h3>

								<ul>
									<li>
										<div class="avatar"><img src="assets/images//avatars/avatar-1.jpg" alt="">
										</div>
										<div class="comment-content">
											<div class="comment-by">Jonathan Madano <span>Student</span>

											</div>
											<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
												nonummy
											</p>
										</div>



									</li>



								</ul>

							</div>

							<div class="comments">
								<h4>你的评论： </h4>
								<ul>
									<li>
										<div class="avatar admin"><img src="assets/images/avatars/1.jpg" alt="" >
										</div>
										<div class="comment-content">
											<form class="uk-grid-small" uk-grid>

												<div class="uk-width-1-1@s">

													<textarea class="uk-textarea" placeholder="发表你的影评..." style=" height:160px"></textarea>
												</div>
												<div class="uk-grid-margin">
													<input type="button" value="发布" class="button primary">
												</div>
											</form>

										</div>
									</li>
								</ul>
							</div>





						</div>
						<div class="uk-width-expand@m">

							<div class="uk-flex uk-flex-middle uk-flex-between px-1 pb-3">
								<p class="mb-0 uk-h5"> 猜你喜欢 </p>



							</div>
							<div class="video-list-small uk-child-width-1-1@m uk-child-width-1-2@s" uk-grid>

















							</div>


						</div>


					</div>

					<!-- footer
               ================================================== -->



				</div>
			</div>

		</div>
		<script src="assets/js/public.js"></script>
		<!-- For Night mode -->
		<script>
			(function(window, document, undefined) {
				'use strict';
				if (!('localStorage' in window)) return;
				var nightMode = localStorage.getItem('gmtNightMode');
				if (nightMode) {
					document.documentElement.className += ' night-mode';
				}
			})(window, document);


			(function(window, document, undefined) {

				'use strict';

				// Feature test
				if (!('localStorage' in window)) return;

				// Get our newly insert toggle
				var nightMode = document.querySelector('#night-mode');
				if (!nightMode) return;

				// When clicked, toggle night mode on or off
				nightMode.addEventListener('click', function(event) {
					event.preventDefault();
					document.documentElement.classList.toggle('night-mode');
					if (document.documentElement.classList.contains('night-mode')) {
						localStorage.setItem('gmtNightMode', true);
						return;
					}
					localStorage.removeItem('gmtNightMode');
				}, false);

			})(window, document);

			// 		window.onload = function() {
			// 			var video = document.querySelector("video");
			// 			video.currentTime = 33;
			// 			$(".video_box video").trigger("play");      //播放视频
			// 			videoflag = false;
			// 			$(".play").hide();
			// 			$(".switch").html('&#xe693');

			// 		};
		</script>


		<!-- javaScripts
                ================================================== -->
		<script src="https://cdn.bootcdn.net/ajax/libs/uikit/3.2.1/js/uikit.min.js"></script>
		<script src="assets/js/jquery-3.3.1.min.js"></script>
		<script src="assets/js/simplebar.js"></script>
		<script src="assets/js/main.js"></script>
		<script src="assets/js/public.js"></script>
		<script>
			var url = getQueryVariable("modieId");
			var typeId = '';
			$.ajax({
				url: apiurl + 'tVideo/get',
				type: 'get',
				async:false, 
				data: {
					'videoId': url
				},
				success: function(data) {
					typeId =  data.data.typeId;
					document.getElementById("modieId").src = imgurl + data.data.videoUrl;
					$(".video-info-title h1").text(data.data.videoTitle);
					$(".pinlun").text(data.data.videoIntroduction);
					$(".video_box video").trigger("play"); //播放视频
					videoflag = false;
					$(".play").hide();
					$(".switch").html('&#xe693');
				}
			})

			function pinlun() {
				$.ajax({
					url: apiurl + 'tOnline/selectByModie',
					type: 'get',
					async:false, 
					data: {
						'movieId': url
					},
					success: function(data) {
						$(".comments-amount").text(data.data.length)
						$(".mt-4 li").remove();
						var html = '';
						for (var i = 0; i < data.data.length; i++) {
							html += "<li>";
							html += "<div class='avatar'><img src="+ imgurl  + data.data[i].avatar + "  alt='' style='width: 60px; height: 60px;'>";
							html += "</div>";
							html += "<div class='comment-content'>";
							html += "<div class='comment-by'> " + data.data[i].nickName + " <span>" + data.data[i].onlineTime + " </span>";
							html += "</div>";
							html += "<p> " + data.data[i].online + "</p>";
							html += "</div>";
							html += "</li>";
						}
						$(".mt-4 ul").append(html)

					}
				})
			}
			pinlun();



			var video = document.querySelector("video");




			window.onbeforeunload = function() {
				var a = "";
				var time = document.querySelector(".time").innerText;
				var b = time.split("/");
				var c = b[0];

				$.ajax({
					url: apiurl + 'tVideo/movieTime',
					type: 'post',
					data: {
						'time': c
					}
				})
			};
			$(".primary").click(function() {
				var text = $(".uk-textarea").val();
				if (text === '') {
					UIkit.notification({
						message: '请勿提交空白评论！',
						status: 'primary',
						pos: 'top-center',
						timeout: 1000
					});
				} else {
					$.ajax({
						url: apiurl + 'tOnline/insert',
						type: 'post',
						data: {
							uid: userId,
							movieId: url,
							content: text
						},
						success: function(data) {
							// UIkit.notification({
							// 	message: '评论已提交审核！',
							// 	status: 'primary',
							// 	pos: 'top-center',
							// 	timeout: 1000
							// });
							$(".uk-textarea").val("");
							pinlun();
							//	setTimeout("location.reload()",2000);


						}
					})
				}
			})

			function init(start,typeId){
	
				$.ajax({
					url: apiurl + 'tVideo/selectByLoveList',
					type: 'post',
					async:false, 
					data: {
						'start':1, 
						'limit':10,
						'typeId': typeId,
						'videoId': url,
					},
					success: function(data) {
					    num = data.data.totalCount;
						var html = "";
						for (var i = 0; i < data.data.list.length; i++) {
							html += " <div>";
							html += "<a href='single-video.html?modieId=" + data.data.list[i].videoId + "' class='video-post video-post-list'>";
							html += "<div class='video-post-thumbnail'>";
							html += "<span class='video-post-count'>" + data.data.list[i].playCount + "</span>";
							html += "<span class='video-post-time'>" + data.data.list[i].videoTime + "</span>";
							html += "<span class='play-btn-trigger'></span>";
							html += "<img src=" + imgurl + data.data.list[i].videoCover + " alt=''>";
							html += "</div>";
							html += "<div class='video-post-content'>";
							html += "<h3>" + data.data.list[i].videoTitle + "</h3>";
							html += "<p></p>";
							html += "<span class='video-post-user'>导演："+ data.data.list[i].videoDirector+"</span>";
							html += "<p></p>";
							html += "<p></p>";
							html += "<p></p>";
							html += "<span class='video-post-user'>导演："+ data.data.list[i].videoDirector+"</span>";
							html += "</div>";
							html += "</a>";
							html += "</div>";
						}
						// $(".video-list-small").remove()
						$(".video-list-small").append(html)
					}
				})
			}
		init(1,typeId);
		</script>

	</body>

</html>
